<template>
    <div class="tr">
        <div class="tr-top">
            <div class="left">
                <div class="itm"><el-button @click="addButtonEv">新增</el-button></div>
            </div>
            <div class="right">
                <div class="itm">
                    <el-date-picker unlink-panels style="width: 250px;" v-model="tableObjData.dd" type="daterange" range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期"  />
                </div>
                <div class="itm">
                    <el-input style="width: 200px;" v-model="tableObjData.qc_no"  :clearable="false"
                        placeholder="单号" />
                </div>
                <div class="itm">
                    <el-input style="width: 200px;" v-model="tableObjData.name"  :clearable="false"
                        placeholder="物料/名称/规格" />
                </div>
                <div class="itm"><el-button @click="getEv(true)">查询</el-button></div>
            </div>
        </div>
        <div class="table-content">
            <el-table empty-text="暂无数据" border height="100%" :data="tableListData">
                <el-table-column align="center" type="index" label="#" width="50" />
                <el-table-column align="center" show-overflow-tooltip header-align="center" prop="qc_no" label="检验单号" width="150" />
                <el-table-column align="center" show-overflow-tooltip header-align="center" prop="qc_dd" label="检验日期" width="130" />
                <el-table-column align="center" show-overflow-tooltip header-align="center" prop="prd_no" label="物料编码" width="200" />
                <el-table-column align="center" show-overflow-tooltip header-align="center" prop="prd_name" label="物料名称" width="200" />
                <el-table-column align="center" show-overflow-tooltip header-align="center" prop="spc" label="物料规格" width="200" />
                <el-table-column align="center" show-overflow-tooltip header-align="center" prop="cus_no" label="供应商" width="150" />
                <el-table-column align="center" show-overflow-tooltip header-align="center" prop="cus_name" label="供应商名称" width="200" />
                <el-table-column align="center" show-overflow-tooltip header-align="center" label="操作" width="180">
                    <template #default="scope">
                        <el-button @click="editEvButton(scope.row.qc_no)" link type="primary" size="small">
                            编辑
                        </el-button>
                        <el-button link @click="deleteButtonEv((scope.row.qc_no))" type="primary" size="small">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <pagination v-show="tableObjData.total > 0" :total="tableObjData.total" v-model:page="tableObjData.page"
            v-model:limit="tableObjData.pageSize" @pagination="getEv(true)" />
    </div>
</template>

<script setup>
import { ref, reactive, onMounted, onActivated } from 'vue'
import { loginInfoStore,loadingStore, tabsBarStore } from '@/stores/index.js'
import { tabsIsAdd } from '@/utils/tabs.js'
import { BasicMftyListGet,BasicMftyPkDelete } from '@/api/basic/index.js'
import { formatDate } from '@/utils/formatTime.js'
import { useRouter } from 'vue-router'
const router = useRouter()
// 顶部菜单数据
const breadcrumbDataList = tabsBarStore()
const loading = loadingStore()
const loginInfoStoreData = loginInfoStore()
const tableListData = ref([])

let tableObjData = reactive({
    name: '',
    sta_dd: '',
    end_dd: '',
    dd: [new Date(), new Date()],
    page: 1,
    total: 0,
    has_next: false,
    has_prev: false,
    pages: 0,
    pageSize: 50
})

onMounted(() => {

})
onActivated(() => {

})

// 查询数据
const getEv = async (msg) => {
    loading.loading = true
    tableObjData.sta_dd = formatDate(tableObjData.dd[0], 'YYYY-mm-dd')
    tableObjData.end_dd = formatDate(tableObjData.dd[1], 'YYYY-mm-dd')
    console.log(tableObjData)
    try {
        let arr_data = await BasicMftyListGet(tableObjData)
        if (arr_data.status != 200) {
            return
        }
        if (msg == true) {
            ElMessage.success('查询成功')
        }
        console.log(arr_data.data)
        tableListData.value = arr_data.data.result.data
        tableObjData.total = arr_data.data.result.total
        tableObjData.has_next = arr_data.data.result.has_next
        tableObjData.has_prev = arr_data.data.result.has_prev
        tableObjData.pages = arr_data.data.result.pages
        tableObjData.pageSize = arr_data.data.result.pageSize

    } catch (error) {
        ElMessage.error('查询接口请求失败' + error)
    } finally {
        loading.loading = false
    }
}

const addButtonEv = async () => {
    const val = {
        router: '/potiadd',
        title: '来料检验新增',
        activate: true
    }
    loginInfoStoreData.menuActive = val.router
    router.push({ path: val.router })

    // 判断是否增加顶部菜单导航
    tabsIsAdd(val, breadcrumbDataList)
}
// 编辑数据
const editEvButton = async (qc_no) => {
    console.log(qc_no)
    const val = {
            router: '/potiedit',
            title: '来料检验编辑',
            activate: true
        }
        // 设置编辑单号
        sessionStorage.setItem("editQcno", qc_no)
        // 设置激活菜单
        loginInfoStoreData.menuActive = val.router
        router.push({ path: val.router })

        // 判断是否增加顶部菜单导航
        tabsIsAdd(val, breadcrumbDataList)
}


// 删除数据
const deleteButtonEv = async (val) => {
    try {
        loading.loading = true
        let arr_data = await BasicMftyPkDelete(val)
        if (arr_data.status != 200) {
            return
        }
        await getEv()
        ElMessage.success('删除成功')
 
    } catch (error) {
        ElMessage.error('删除接口请求失败' + error)
    } finally {
        loading.loading = false
    }
}

</script>

<style lang='less' scoped>
.tr {
    height: 100%;
}

.tr-top {
    height: var(--tr-top-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;

    .left {
        display: flex;
        align-items: center;
        width: 100px;

    }

    .right {
        width: calc(100% - 100px);
        display: flex;
        align-items: center;
        justify-content: right;

    }

    .itm {
        padding-right: 4px;
        box-sizing: border-box;
    }
}

.table-content {
    height: calc(100% - var(--tr-top-height) - var(--tr-page-height));
}
</style>